<template>
    <div class="container">
        <div class="map2"></div>
        <!-- <div class="map3"></div> -->
        <!-- <div style="clear: both;"></div> -->
        <header>
            <h1>网格宗智大数据平台</h1>
            <div class="showTime" v-html="time"></div>
        </header>
        <section class="mainbox" :key="renderKey">
            <div class="flexBox">
                <div class="flexItem box1">
                    <div class="box1_1">
                        <div class="panel">
                            <h2>各职能部门完成情况排名</h2>
                            <chartBox1 />
                            <div class="panel-footer"></div>
                        </div>
                    </div>

                    <div>
                        <div class="box1_2">
                            <div class="panel">
                                <h2>事件类型等级分布</h2>
                                <chartBox2 :list="databox2"/>
                                <div class="panel-footer"></div>
                            </div>
                        </div>

                        <div class="box1_3">
                            <div class="panel">
                                <h2>本年度巡查任务分布</h2>
                                <chartBox3 />
                                <div class="panel-footer"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box2">
                    <div class="panel">
                        <h2>本年度事件趋势图</h2>
                        <chartBox4 :list="databox4"/>
                        <div class="panel-footer"></div>
                    </div>
                </div>
            </div>
            <div class="flexBox">
                <div class="row3 box3">
                    <div class="panel">
                        <div class="flexC">
                            <div class="icon"></div>
                            <div style="text-align: center;">
                                <p class="tip">累计办结数</p>
                                <span class="font1">{{ endTotal }}</span>
                            </div>
                        </div>
                        <div class="panel-footer"></div>
                    </div>
                    <div class="panel">
                        <div class="flexC">
                            <div class="icon i2"></div>
                            <div style="text-align: center;">
                                <p class="tip">今日新增数</p>
                                <span class="font1">{{ newTotal }}</span>
                            </div>
                        </div>
                        <div class="panel-footer"></div>
                    </div>
                    <div class="panel">
                        <p class="tip"><span class="icon i3"></span>累计办结率</p>
                        <div class="flexC">
                            <span class="font1">{{ endRate }}%</span>
                            <el-progress :percentage="endRate" status="exception" :show-text="false" style="width: 90%; margin-left:10px; height: .25rem"></el-progress>
                        </div>
                        <div class="panel-footer"></div>
                    </div>
                </div>
                <div class="box4">
                    <div class="panel">
                        <div class="flexC">
                            <div>
                                <p class="tip2">系统总派单量</p>
                                <span class="font2">{{ warningTotal }}</span>
                            </div>
                            <h2 style="margin-left: 2rem;">统战委员会任务分布情况</h2>
                        </div>

                        <chartBox8 />
                        <div class="panel-footer"></div>
                    </div>
                </div>

                <div class="box5">
                    <div class="panel">
                        <h2>统战委员会任务完成率</h2>
                        <chartBox9 />
                        <div class="panel-footer"></div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import '@/utils/rem'
import chartBox1 from '../components/box1.vue';
import chartBox2 from '../components/box2.vue';
import chartBox3 from '../components/box3.vue';
import chartBox4 from '../components/box4.vue';
import chartBox5 from '../components/box5.vue';
import chartBox6 from '../components/box6.vue';
import chartBox7 from '../components/box7.vue';
import chartBox8 from '../components/box8.vue';
import chartBox9 from '../components/box9.vue';
// import Cookies from 'js-cookie'
import apis from '@/apis/api';
document.title = '统战数据分析系统';
export default {
    name: 'index',
    components: { chartBox1, chartBox2, chartBox3, chartBox4, chartBox5, chartBox6, chartBox7, chartBox8, chartBox9 },
    data() {
        return {
            renderKey: 1,
            databox1: [],
            databox2: [],
            databox3: [],
            databox4: [],
            databox8: [],
            databox9: [],
            time: '2023-01-01',
            endTotal: 0, //办结总数
            endRate: 0, //办结率
            warningTotal: 0, //系统总派单量
            newTotal: 0 //今日新增数
        }
    },
    mounted() {
        // Cookies.set('vue_admin_template_token', 123)
        this.getTime();
        this.init()
        setInterval(()=>{
            console.log('dsq');
            this.renderKey=Math.random();
        }, 1800000)//半小时自动刷新
    },
    computed: {},
    methods: {
        init() {
            apis.analysisNum({}).then(result => {
                let res = result.data;
                this.endTotal = res.endTotal //办结总数
                this.endRate = res.endRate //办结率
                this.warningTotal = res.warningTotal  //系统总派单量
                this.newTotal = res.newTotal //今日新增数
            });
            // /** 统战委员任务分布情况 */
            // apis.analysisTask.then(result => {
            //     let res = result.data;
            //     this.databox8 = res;
            // });
        },
        getTime() {
            var t = null;
            const time = () => {
                clearTimeout(t); //清除定时器
                let dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours(); //获取时
                var m = dt.getMinutes(); //获取分
                var s = dt.getSeconds(); //获取秒
                this.time = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + '<span style="display:inline-block; width: .3rem">' + s + '</span>' + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行
            }
            t = setTimeout(time, 1000); //開始运行
        }
    }
}
</script>
<style>
.el-progress-bar__outer, .el-progress-bar__inner {
    height: .25rem !important;
}
</style>
<style lang="scss" scoped>
$panelTip: .045rem;
$panelBorder: .25rem;
$boxMargin: .14rem;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'electronicFont';
    src: url('../../src/assets/font/DS-DIGIT.TTF');
}

.map2,
.map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.map2 {
    width: 5.5rem;
    height: 5.5rem;
    background: url('../../src/assets/images/lbx.png') no-repeat 100%/cover;
    opacity: 0.6;
    animation: rotate 15s linear infinite;
}

.map3 {
    width: 4.075rem;
    height: 4.075rem;
    background-image: url('../../src/assets/images/jt.png');
    animation: rotate1 10s linear infinite;
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate1 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 42px !important;
    }
}

@media screen and (min-width: 1920) {
    html {
        font-size: 80px !important;
    }
}

.mainbox {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 99%;
    margin: 0 auto;
    height: calc(100% - 1.25rem);
    overflow: hidden;
    // background: #fff;
}

.flexC {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.icon {
    // width: 0;
    // height: 0;
    // border-left: ;
    // border-right: ;
    // border: .25rem solid transparent;
    // border-bottom-color: #00bfff;
    width: .8rem;
    height: .8rem;
    border: .25rem solid #00bfff;
    border-radius: 50%;
    margin-right: .2rem;
}

.i2 {
    border-color: #f87706;
    // border-bottom-color: #f87706;
}

.i3 {
    display: inline-block;
    width: .28rem;
    height: .28rem;
    border: .1rem solid #ff0000;
    border-radius: 50%;
    margin-right: .1rem;
    vertical-align: middle;
    // border: .1rem solid transparent;
    // border-bottom-color: #f80606;
}

.tip {
    font-size: .25rem;
    color: #7495cb;
}

.tip2 {
    font-size: .28rem;
    color: #b6e2fc;
}

.font1,
.font2 {
    font-size: .6rem;
    color: #b6e2fc;
    font-family: 'electronicFont';
    font-weight: bold;
}

.font2 {
    font-size: .9rem;
}

.box1 {
    height: 60%;
}

.box2 {
    // 注意这里减值
    height: calc(40% - .14rem);
    margin-top: $boxMargin;

    .panel {
        width: 100%;
    }
}

.box3 {
    height: 15%;
}

.box4 {
    // 注意这里减值
    height: calc(55% - .28rem);
    margin: $boxMargin 0;
}

.box5 {
    height: 30%;
}

.box1_1 {
    // 注意这里减值
    width: calc(50% - .14rem);
    margin-right: $boxMargin;
}

.box1_2 {
    width: 100%;
    // 注意这里减值
    height: calc(50% - .14rem);
    margin-bottom: $boxMargin;
}

.box1_3 {
    width: 100%;
    height: 50%;
}

.row3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    >div {
        width: calc(33% - .04rem);
    }
}

.flexBox {
    width: 50%;
    height: 98%;
}

.flexBox:nth-child(2) {
    width: calc(50% - .15rem);
    margin-left: $boxMargin;
}

.flexItem {
    display: flex;
    flex-direction: row;

    >div {
        width: 50%;
        height: 100%;
    }
}

.colum {
    >div {
        height: 50%;
    }
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
    background: url('../../src/assets/images/bg.jpg') no-repeat #000;
    background-size: cover;
}

header {
    position: relative;
    height: 1.25rem;
    background: url('../../src/assets/images/head_bg.png') no-repeat top center;
    background-size: 100% 100%;
}

header h1 {
    font-size: 0.475rem;
    color: #34c5f7;
    text-align: center;
    line-height: 1rem;
}

header .showTime {
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'electronicFont';
}

.panel {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(25, 186, 139, 0.17);
    background: rgba(255, 255, 255, 0.04) url('../../src/assets/images/line.png');
    padding: 2%;
}

.panel::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: $panelBorder;
    height: $panelBorder;
    border-top: $panelTip solid #02a6b5;
    border-left: $panelTip solid #02a6b5;
}

.panel::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: $panelBorder;
    height: $panelBorder;
    border-top: $panelTip solid #02a6b5;
    border-right: $panelTip solid #02a6b5;
}

.panel .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.panel .panel-footer::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: $panelBorder;
    height: $panelBorder;
    border-bottom: $panelTip solid #02a6b5;
    border-left: $panelTip solid #02a6b5;
}

.panel .panel-footer::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: $panelBorder;
    height: $panelBorder;
    border-bottom: $panelTip solid #02a6b5;
    border-right: $panelTip solid #02a6b5;
}

.panel h2 {
    // height: 0.4rem;
    text-align: center;
    color: #c6eaff;
    font-size: 0.25rem;
    font-weight: 600;
}
</style>
